<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="DATAisUS Admin Panel" />
    <meta name="author" content="" />

   <!--  <title>Reference-data</title> -->

    <link rel="stylesheet" href="<c:url value="/assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/font-icons/entypo/css/entypo.css" />">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
    <link rel="stylesheet" href="<c:url value="/assets/css/bootstrap.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-core.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-theme.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-forms.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/custom.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/white.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/override.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/css/fonts.css" />">

    <script src="<c:url value="/assets/js/jquery-1.11.0.min.js" />"></script>
	<script type="text/javascript">
        function toggleFullScreen() {
			if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || document.mozFullScreenEnabled) {
				 if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
					  (!document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement)) {               
					if (document.documentElement.requestFullScreen) {
					  document.documentElement.requestFullScreen();
					} else if (document.documentElement.mozRequestFullScreen) {
					  document.documentElement.mozRequestFullScreen();
					} else if (document.documentElement.webkitRequestFullScreen) {
					  document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
					} else if (this.msRequestFullscreen) {
						this.msRequestFullscreen();
					}
				  } else {
					if (document.cancelFullScreen) {
					  document.cancelFullScreen();
					} else if (document.mozCancelFullScreen) {
					  document.mozCancelFullScreen();
					} else if (document.webkitCancelFullScreen) {
					  document.webkitCancelFullScreen();
					}else if (document.msExitFullscreen) {
					  document.msExitFullscreen();
					} 
				  }	  
			} else {
			  alert("Your browser does not support the fullscreen API.");
			}
		}
        </script>
    <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <!--- - jqwidgets CSS & JS Files- -->

    <link rel="stylesheet" href="<c:url value="/assets/jqwidgets/styles/jqx.base.css" /> " type="text/css" />
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxcore.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdata.js" />"></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxbuttons.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxscrollbar.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdatatable.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxcheckbox.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxlistbox.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdropdownlist.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxmenu.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.sort.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxinput.js" />"></script>
    <script type="text/javascript" src="<c:url value="./assets/jqwidgets/jqxgrid.pager.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.selection.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.filter.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxpanel.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.grouping.js" />"></script>    
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.columnsresize.js" />"></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.columnsreorder.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdata.export.js" />"></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.export.js" />"></script> 
    <script type="text/javascript" src="<c:url value="/assets/scripts/demos.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/scripts/knockout-3.0.0.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/js/common.js" />"></script>
    <script type="text/javascript">
    //------Commented for running app directly in TC server-----
   //var baseUrl = 'http://localhost:8080/EZOPSDashboardUI';
   //var baseUrl = 'http://172.31.29.81:8080/EZOPSDashboardUI';
   //var baseUrl = 'http://ec2-54-210-17-99.compute-1.amazonaws.com/EZOPSDashboardUI';
   //var baseUrl = '../EZOPSDashboardUI';
        $(document).ready(function () {
        	
        	//to disbale footer links--------------------------
        	$("a.disabled").click(function () {return false;});
            	
            	
            	
            
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                     { name: 'Funds', type: 'string' },
                     { name: 'Manager', type: 'string' },
                     { name: 'Client', type: 'string' }
                ], 
                url: 'assets/sampledata/funds.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            var cellClass = function (row, dataField, cellText, rowData) {
                var cellValue = rowData[dataField];
                switch (dataField) {
                    case "diffQuantity":
                        if (cellValue >100 || cellValue < 0) {
                            return "minavg";                            
                        }
                        if (cellValue <= 100 ) {
                            return "max";
                        }                       
                        return "max";
                        
                    case "diffMarketValue":
                        if (cellValue >100 || cellValue < 0) {
                            return "minavg";                            
                        }
                        if (cellValue <= 100 ) {
                            return "max";
                        }                        
                        return "min";                    
                }
            }
            // create jqxDataTable.
            $("#Funds").jqxGrid(
            {
                source: source,
                width: '99%',
                autorowheight: true,
                autoheight: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                altRows: true,
                groupable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                
                columns: [
                  { text: 'Funds', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'left', dataField: 'Funds',/* pinned: true,*/  width: '30%' },
                  { text: 'Manager', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'left', dataField: 'Manager', width: '25%' },
                  { text: 'Client',columngroup: 'ProductDetails', dataField: 'Client', cellsformat: 'd', cellsAlign: 'left', align: 'left', width: '30%' },
                  { text: 'Action', dataField: 'secType', sortable: false, columngroup: 'ProductDetails', cellsformat: 'c2', align: 'left', cellsAlign: 'left', filterable: false, sortable: false,groupable: false,  dataField: null, cellsRenderer: function (row, column, value) {
                              // render custom column.
                              return "<button type='button' class='btn btn-xs btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Edit' data-original-title='Edit'>  <i class='entypo-pencil'></i></button><button type='button' class='btn btn-xs btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Duplicate' data-original-title='Duplicate'>  <i class='entypo-list-add'></i></button>"
            
                              ;
                          }  
                }
                ]
            });

            
            $(document).ready(function () {
                 // prepare the data
                var source1 =
                {
                    dataType: "csv",
                    dataFields: [
                         { name: 'TradeFile', type: 'string' },
                         { name: 'DataPoint', type: 'string' },
                         { name: 'InboundMapping', type: 'string' },
                         { name: 'OutboundMapping', type: 'string' }
                    ], 
                    url: 'assets/sampledata/tradefileMapping.csv'
                };
                var dataAdapter = new $.jqx.dataAdapter(source1, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
            
                $("#unMapped").jqxGrid(
                {
                    source: dataAdapter,
                    width: '99%',
                    autorowheight: true,
                    autoheight: true,
                    pageable:false,
                    filterable: true,
                    selectionmode: 'multiplecellsextended',
                    altRows: true,
                    groupable: true,
                    columnsresize: true,
                    columnsreorder: true,
                    sortable: true,
                        
                    columns: [
                      { text: 'Trade File', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'left', dataField: 'TradeFile',/* pinned: true,*/  width: '20%' },
                      { text: 'Data Point', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'left', dataField: 'DataPoint', width: '25%' },
                      { text: 'Inbound Mapping',columngroup: 'ProductDetails', dataField: 'InboundMapping', cellsformat: 'd', cellsAlign: 'left', align: 'left', width: '20%' },
                      { text: 'Outbound Mapping',columngroup: 'ProductDetails', dataField: 'OutboundMapping', cellsformat: 'd', cellsAlign: 'left', align: 'center', width: '20%' },
                      { text: 'Action', sortable: false, columngroup: 'ProductDetails', cellsformat: 'c2', align: 'left', cellsAlign: 'left', filterable: false, sortable: false, groupable: false,  dataField: null, cellsRenderer: function (row, column, value) {
                                  // render custom column.
                                  return "<button type='button' class='btn btn-xs btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Edit' data-original-title='Edit'>  <i class='entypo-pencil'></i></button><button type='button' class='btn btn-xs btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Duplicate' data-original-title='Duplicate'>  <i class='entypo-list-add'></i></button>"
                
                                  ;
                              }  
                    }
                    ]
                    
                });
            
            });
        });
    </script>
    <script type="text/javascript">
        var source1 =
                {
                    dataType: "xml",
                    dataFields: [
                         { name: 'client', type: 'string' },
                         { name: 'batchId', type: 'number' },
                         { name: 'source', type: 'date' },
                         { name: 'Processed', type: 'string' },
                         { name: 'Ignore', type: 'number' },
                         { name: 'type', type: 'number' },
                         { name: 'Status', type: 'string' },
                         { name: 'Total', type: 'string' },
                         { name: 'datetime', type: 'string' },
                         { name: 'manager', type: 'string' },
                         { name: 'action', type: 'string' },
                         { name: 'Pending', type: 'string' }
                    ], 
                    url: 'assets/sampledata/FileMonitorOutbond.xml',
                    root: 'DATA',
                    record: 'ROW'
                };
                var dataAdapter = new $.jqx.dataAdapter(source1, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
            
            
                /*columns: [
                    { text: 'Trade File', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'ezId',  width: '20%' },
                    { text: 'Data Point', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'cp', width: '20%' },
                    { text: 'Inbound Mapping',columngroup: 'ProductDetails', dataField: 'cpId', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: '20%' },
                    { text: 'Outbound Mapping', dataField: 'secType',columngroup: 'ProductDetails', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: '20%' },
                    { text: 'Action', dataField: 'secType1',columngroup: 'ProductDetails', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: '20%',  filterable: false, sortable: false,groupable: false,  dataField: null, cellsRenderer: function (row, column, value) {
                              // render custom column.
                              return "<button type='button' class='btn btn-sm btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Edit' data-original-title='Edit'>  <i class='entypo-pencil'></i></button><button type='button' class='btn btn-sm btn-info table_icon_btn' data-toggle='tooltip' data-placement='top' title='Duplicate' data-original-title='Duplicate'>  <i class='entypo-list-add'></i></button>"
            
                              ;
                          }  
                    }
                ]*/
    </script>

</head>
<body class="page-body" onLoad="loadForms()">

    <div class="page-container white page-left-in">

        <div class="sidebar-menu">  
            <header class="logo-env">
                <div class="logo">
                    <a href="<c:url value="/dashboard" />">
                        <img src="<c:url value="/assets/images/logo.png" />  " width="120" alt="" />
                    </a>
                </div>  
                <div class="sidebar-collapse">
                    <a href="#" class="sidebar-collapse-icon with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
                <div class="sidebar-mobile-menu visible-xs">
                    <a href="#" class="with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
            </header>

            <div class="sidebar-user-info">
                 <span  class="user-link">
                        	 <a href=""  data-target="#profilePicModal" data-toggle="modal" title="Change Image">
                       				 <i class="entypo-cog right"></i>
                              </a>
                              <img src="<c:url value="/assets/images/${pic}"/>" alt="" width="44px" height="44px" class="img-circle" />
                         
                            <span>Welcome,</span>
                            <strong>${user}</strong>
                        </span>
            </div>
            
            <ul id="main-menu" >
                <li id="search" class="">
                    <form action="" method="get">
                        <input type="text" placeholder="Search something..." class="search-input" name="q">
                        <button type="submit">
                            <i class="entypo-search"></i>
                        </button>
                    </form>
                </li>
   					<!-- ko foreach: pageList -->
				     <!-- <li   class="active" data-bind="css : { 'active' : ko.toJS(fileName)=='referencedata'}" >
                        <a data-close-others="true" class="dropdown-toggle"
                        	data-bind="attr : { 'href' : ezopsContextPath+'/'+ko.toJS(fileName)}"
                        >
                            <i class="entypo-gauge"></i>
                            <span data-bind="text : resourceId"></span>
                        </a>
				</li> -->
				<!-- /ko -->
				<jsp:include page="mainMenus.jsp"/>
	  				<!--  <li>
                            <a href="#" data-target="#reportModal" data-toggle="modal" class="">
                           <i class="entypo-gauge"></i> File Management
                            </a>
                  </li> -->  
                 <li >
                    <a data-close-others="true" class="dropdown-toggle" href="#">
                        <i class="entypo-plus"></i>
                        <span>Add</span>
                    </a>
                    <ul class="" style="opacity: 0.2; height: 0px;">
                        <li>
                            <a href="#" data-target="#clientModal" data-toggle="modal" class="" data-bind="click : function(){ $root.addClient($data) }">
                            Add Client 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#ManagerModal" data-toggle="modal" class="" data-bind="click : function(){ $root.addManager($data) }">
                            Add Manager 
                            </a>
                        </li>
						  <li>
                            <a href="#" data-target="#userModal" data-toggle="modal" class=""  data-bind="click : function(){ $root.addUser($data) }">
                            Add User 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#groupModal" data-toggle="modal" class=""  data-bind="click : function(){ $root.addGroup($data) }">
                            Add Group 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#resourcesModal" data-toggle="modal" class="" data-bind="click : function(){ $root.addResource($data) }">
                            Add Resource 
                            </a>
                        </li>
                      
                        <li>
                            <a href="#" data-target="#fundsModal" data-toggle="modal" class="">
                            Map Funds 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#tradefundModal" data-toggle="modal" class="">
                            Trade Map Funds 
                            </a>
                        </li>
                        <!-- <li>
                            <a href="#" data-target="#tradefundModal" data-toggle="modal" class="">
                            Add Task 
                            </a>
                        </li> -->

                    </ul>  
                </li>
            </ul>        
        </div>
       
        <div class="main-content">
           <div class="row">
            
            <!-- Profile Info and Notifications -->
            <div class="col-md-6 col-sm-8 ">                
                          </div>
            
            <div class="col-md-6 col-sm-4 ">
                
                <ul class="list-inline links-list pull-right">
                    <li>
                      
                        <a href="" class="disabled">
                        <i class="entypo-cog right"></i>
                       User Preferences 
                        </a>
                        
                    </li>
                    <li class="sep"></li>
                    
                    <li>
                        <a id="logout" href="<c:url value="/" />">
                            Log Out <i class="glyphicon glyphicon-off  right"></i>
                        </a>
                    </li>
                </ul>
                
            </div>
    
        </div>
        <hr/>
            <div class="row">
                <div class="col-md-12">
                   <div class="row">
                   	<div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>Clients</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#clientModal"
                                            data-bind="click : function(){ $root.addClient($data) }">
                                                <i class="entypo-plus"></i> Add Client </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->                                
                                <div class="panel-body profile-env ">
                                     <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : clientList">
                                           
                                         
                                             <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                            <div class="story-type">
                                                               | &nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#clientModal" class="liked" 
                                                               data-bind="click : function(){ $root.editClient($data) }">
                                                                    Edit <span> &nbsp; </span>
                                                                </a> 
                                                                
                                                               
                                                            </div>
                                                            Name <a href="#" data-bind="text : ko.toJS(firstName) +' ' + ko.toJS(lastName)"></a>
                                                            Contact No.   <a href="#" data-bind="text : contactNum"></a>
                                                            
                                                            <em data-bind="text : profession"></em>
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article> 
                                        </div>
                                    </section>
                                                                    </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                         <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>Manager</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#managerModal" 
                                              data-bind="click : function(){ $root.addManager($data) }" href="#">
                                                <i class="entypo-plus"></i> Add Manager </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->
                                
                                <div class="panel-body profile-env ">
                                   <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : managerList">
                                           
                                         
                                             <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                            <div class="story-type">
                                                               | &nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#managerModal" class="liked" 
                                                               data-bind="click : function(){ $root.editManager($data) }">
                                                                    Edit <span> &nbsp; </span>
                                                                </a> 
                                                                
                                                               
                                                            </div>
                                                            Name <a href="#" data-bind="text : ko.toJS(firstName) +' ' + ko.toJS(lastName)"></a>
                                                            ContactNo.   <a href="#" data-bind="text : contactNum"></a>
                                                            
                                                            <em data-bind="text : profession"></em>
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article> 
                                        </div>
                                    </section>
                                     
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                   	
                   
                   </div>
					<div class="row">
                        <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>Users</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#userModal" 
                                            data-bind="click : function(){ $root.addUser($data) }">
                                                <i class="entypo-plus"></i> Add User </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->                                
                                <div class="panel-body profile-env ">
                                    <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : userList">
                                           
                                         
                                             <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                            <div class="story-type">
                                                               | &nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#userModal" class="liked" 
                                                               data-bind="click : function(){ $root.editUser($data) }">
                                                                    Edit <span> &nbsp; </span>
                                                                </a> 
                                                                
                                                               
                                                            </div>
                                                            Name <a href="#" data-bind="text : ko.toJS(firstName) +' ' + ko.toJS(lastName)"></a>
                                                            Group Id  <a href="#" data-bind="text : groupId"></a>
                                                            Active  <a href="#" data-bind="text : isActive"></a>
                                                            <em data-bind="text : email"></em>
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article> 
                                        </div>
                                    </section>
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        
                    </div>
                
                        <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>User-Group</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#userGroupModal" 
                                            data-bind="click : function(){ $root.addUserGroup($data) }">
                                                <i class="entypo-plus"></i> Add User to Group</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->                                
                                <div class="panel-body profile-env ">
                                    <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : allUserGroupList">
                                           
                                         
                                             <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                           
                                                            User Id <a href="#" data-bind="text : userId"></a>
                                                            Group Id  <a href="#" data-bind="text : groupId"></a>
                                                         
                                                            
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article> 
                                        </div>
                                    </section>
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                       
                    </div>
                
                
                    <div class="row">
                         <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                  <div class="panel-title"><strong>Group</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#groupModal" 
                                            data-bind="click : function(){ $root.addGroup($data) }">
                                                <i class="entypo-plus"></i> Add Group </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->                                
                                <div class="panel-body profile-env ">
                                    <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : groupList">
                                            <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                            <div class="story-type">
                                                               | &nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#groupModal" class="liked" 
                                                               data-bind="click : function(){ $root.editGroup($data) }">
                                                                    Edit <span> &nbsp; </span>
                                                                </a> 
                                                                
                                                               
                                                            </div>
                                                             Id  <a href="#" data-bind="text : groupId"></a>
                                                           
                                                            Name <a href="#" data-bind="text : groupName"></a>
                                                            
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article>
                                            </div>
                                    </section>
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                   
              		  <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                  <div class="panel-title"><strong>Resource</strong> 
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#resourcesModal" 
                                            data-bind="click : function(){ $root.addResource($data) }">
                                                <i class="entypo-plus"></i> Add Resource </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->
                               <div class="panel-body profile-env ">
                                    <section class="profile-feed">
                                        <div class="profile-stories" data-bind="foreach : resourceList">
                                            <article class="story">
                                                <aside class="user-thumb">
                                                    <a href="#">
                                                        <img src="<c:url value="/assets/images/lockscreen-user.png" /> " width="40" alt="" class="img-circle">
                                                    </a>
                                                </aside>                                                        
                                                <div class="story-content">                                                            
                                                    <!-- story header -->
                                                    <header>
                                                        <div class="publisher">
                                                            <div class="story-type">
                                                               | &nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#resourcesModal" class="liked" 
                                                               data-bind="click : function(){ $root.editResource($data) }">
                                                                    Edit <span> &nbsp; </span>
                                                                </a> 
                                                                
                                                               
                                                            </div>
                                                            Name <a href="#" data-bind="text : resourceId"></a>
                                                           
                                                            Group Id <a href="#" data-bind="text : groupId"></a>
                                                            <em data-bind="text : resourceType"></em>
                                                            
                                                        </div>
                                                    </header>
                                                </div>
                                            </article>
                                            </div>
                                    </section>
                                
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>     
					<div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>Funds</strong>
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#fundsModal" href="#">
                                                <i class="entypo-plus"></i> Map Funds </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-heading -->
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div id="Funds"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title"><strong>Trade File Mapping</strong>
                                        <div class="pull-right">
                                            <a class="btn btn-default btn-icon icon-left" data-toggle="modal" data-target="#tradefundModal" href="#">
                                                <i class="entypo-plus"></i> Trade Map Funds </a>
                                        </div>
                                    </div> 
                                </div>
                                <!-- /.panel-heading -->
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div id="unMapped"></div>                                            
                                        </div>
                                    </div>
                                    
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                </div>
            </div>
            <footer class="site-footer">

            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                        
                        	 
                          <div class="col-sm-2">
                                <a class="disabled" href="" class="about">about us</a>
                            </div>
                            <div class="col-sm-2">
                                <a   class="disabled"  href="" class="contact">contact us</a>
                            </div>
                            <div class="col-sm-4 center1">
                                <p>Copyright &copy; 2014 by ezops. All rights reserved.</p>
                            </div>
                            <div class="col-sm-4">
                                <div class="social-icon pull-right">
                                    <ul>
                                        <li><a   href="" class="google disabled"></a></li>
                                        <li><a   href="" class="linkdin disabled"></a></li>
                                        <li><a   href="" class="twitter disabled"></a></li>
                                        <li><a   href="" class="facebook disabled"></a></li>
                                    </ul>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>  
                
            </div>
            
        </footer>
        </div>

        <!-- Site Footer -->
        
    </div>

    <!-- Modal Client -->
    <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Client</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" data-bind=" value : clientAddEditData().firstName" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Last Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().lastName" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Profession</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().profession" placeholder="Profession">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Contact No.</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().contactNum" placeholder="Contact No.">
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary"  data-dismiss="modal" data-bind=" click : function(){ $root.saveClient() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Manager -->
    <div class="modal fade" id="managerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Manager</h4>
          </div>
          <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" data-bind=" value : managerAddEditData().firstName" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Last Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().lastName" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Profession</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().profession" placeholder="Profession">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Contact No.</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().contactNum" placeholder="Contact No.">
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary"  data-dismiss="modal" data-bind=" click : function(){ $root.saveManager() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>

	<!-- Modal User -->
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add User</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="userId">User ID</label>
                    <input type="texy" class="form-control" id="userId" placeholder="User ID" data-bind=" value : userAddEditData().userId">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" data-bind=" value : userAddEditData().password">
                </div>
                
                <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" id="firstName" placeholder="First Name" data-bind=" value : userAddEditData().firstName">
                </div>
                <div class="form-group">	
		            <label for="lastName">Last Name</label>
                    <input type="text" class="form-control" id="lastName" placeholder="Last Name" data-bind=" value : userAddEditData().lastName">
                </div>
                <div class="form-group">
                    <label for="emailId">Email Id</label>
                    <input type="email" class="form-control" id="emailId" placeholder="Email" data-bind=" value : userAddEditData().email">
                </div>
                <div class="form-group">
                    <label for="isActive">Is Active</label>
                    <select class="form-control" id="isActive" placeholder="Y/N" data-bind=" value : userAddEditData().isActive" >
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                    </select>
                </div> 
				<div class="form-group">
                    <label for="userGroupId">Group ID</label>
                    <select class="form-control" id="userGroupId" placeholder="Group ID" data-bind=" value : userAddEditData().groupId" >
                          <!-- ko foreach : groupList -->
                    		
                    		<option   data-bind="text : groupName , value : groupId ,
                    							attr : {'selected' : ko.toJS(userAddEditData().groupId)==ko.toJS(groupId)}" ></option>
                    		
                    	<!-- /ko -->
                    </select>
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="userSave" data-dismiss="modal" data-bind=" click : function(){ $root.saveUser() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>


	  <!-- Modal Group -->
    <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Group</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="groupId">Group ID</label>
                    <input type="text" class="form-control" id="groupId" data-bind="value : groupAddEditData().groupId " placeholder="Group ID">
                </div> 
                <div class="form-group">
                    <label for="groupName">Name</label>
                    <input type="text" class="form-control" id="groupName" data-bind="value : groupAddEditData().groupName " placeholder="Name">
                </div><div class="form-group">
                    <label for="parentGroupId">Parent Group Id</label>
                    <input type="text" class="form-control" id="parentGroupId" data-bind="value : groupAddEditData().parentGroupId " placeholder="Parent Group Id">
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="groupSave" data-dismiss="modal" data-bind="click : function(){ $root.saveGroup();}">Save changes</button>
          </div>
        </div>
      </div>
    </div>

  <!-- Modal User-Group -->
    <div class="modal fade" id="userGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add User Group</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="UserId">User</label>
                    <select  class="form-control" id="ugUserId" 
                    data-bind="value : userGroupAddEditData().userId, event: { change:function(){$root.getUserGroup();}}">
                    			<option value='0'>Select</option>
                    			<!-- ko foreach : userList -->
                    				<option data-bind="value : userId, text : ko.toJS(firstName)+' ' +ko.toJS(lastName)"></option>
                    			<!-- /ko -->
                    </select>
                    
                </div> 
                <div class="form-group">
                    <label >Currently Assigned to </label>
                    <select  class="form-control">
                    			<!-- ko foreach : userGroupList -->
                    				<option data-bind="value : groupId, text : groupId"></option>
                    			<!-- /ko -->
                    </select>
                    
                </div> 
                <div class="form-group">
                    <label for="groupId">Select Groups (hold ctrl to select multiple)</label>
                    <select multiple size=5 class="form-control" id="ugGroupId" >
                    	
                    			<!-- ko foreach : unmappedGroupList -->
                    				<option data-bind="value : groupId, text : groupName"></option>
                    			<!-- /ko -->
                    </select>
                </div> 
               
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="groupSave" data-dismiss="modal" data-bind="click : function(){ $root.saveUserGroup();}">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Resource -->
    <div class="modal fade" id="resourcesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Resource</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Resource Name</h4>
                      	<input type="text" class="form-control" id="resourceId" placeholder="Resource Name" data-bind=" value : resourceAddEditData().resourceId" >
                    </div>
                    </div>
                     <div class="form-group">
                       <div class="fund-section">
                        <h4>File Name</h4>
                      	<input type="text" class="form-control" id="fileName" placeholder="File Name" data-bind=" value : resourceAddEditData().fileName" >
                    </div>
                    </div>
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Type</h4>
                        <select id='resourceType' class="form-control select1" data-bind=" value : resourceAddEditData().resourceType" >
                            <option>Report</option>
                            <option>Page</option>
                            
                        </select>
                      </div>
                    </div>
                     
                    <div class="form-group">
                       <div class="fund-section">
                        <h4> Group Id</h4>
						
						 <select class="form-control" id="resourceGroupId"  data-bind=" value : resourceAddEditData().groupId" >
	                          <!-- ko foreach : groupList -->
	                    		
	                    		<option   data-bind="text : groupName , value : groupId ,
	                    							attr : {'selected' : ko.toJS(resourceAddEditData().groupId)==ko.toJS(groupId)}" ></option>
	                    		
	                    	<!-- /ko -->
                    	</select>
						
                      </div>
                      <div id="result"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="resourceSave" data-dismiss="modal" data-bind=" click : function(){ $root.saveResource() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>
	<!-- Modal Map Funds -->
    <div class="modal fade" id="fundsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Map Funds</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Client</h4>
                        <select class="form-control select1" >
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Manager</h4>
                        <select class="form-control select1">
                            
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                            <option>SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4> Funds</h4>
                        <select class="form-control select1">
                           
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values">Map</button>
                      <div id="result"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Trade Map Funds -->
    <div class="modal fade" id="tradefundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Trade Map Funds</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Trade File</h4>
                        <select class="form-control select3">
                          
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Data Point</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Inbound Mapping</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Outbound Mapping</h4>
                        <select class="form-control select3">
                            <option>Funds</option>
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values1">Map</button>
                       <div id="result1"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
<div id="loadUploadForms"></div>
    
    

    	<link rel="stylesheet" href="<c:url value="/assets/js/datatables/responsive/css/datatables.responsive.css" />">

    	<!-- Bottom Scripts -->
    	<script src="<c:url value="/assets/js/gsap/main-gsap.js" />"></script>
    	<script src="<c:url value="/assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js" />"></script>
    	<script src="<c:url value="/assets/js/bootstrap.js" />"></script>
    	<script src="<c:url value="/assets/js/joinable.js" />"></script>
    	<script src="<c:url value="/assets/js/resizeable.js" />"></script>
    	<script src="<c:url value="/assets/js/jquery.dataTables.min.js" />"></script>
    	<script src="<c:url value="/assets/js/datatables/TableTools.min.js" />"></script>
    	<script src="<c:url value="/assets/js/dataTables.bootstrap.js" />"></script>
    	<script src="<c:url value="/assets/js/datatables/jquery.dataTables.columnFilter.js" />"></script>
    	<script src="<c:url value="/assets/js/datatables/lodash.min.js" />"></script>
    	<script src="<c:url value="/assets/js/datatables/responsive/js/datatables.responsive.js" />"></script>
       <link rel="stylesheet" href="<c:url value="/assets/js/daterangepicker/daterangepicker-bs3.css" />">  
        <script src="<c:url value="/assets/js/neon-demo.js" />"></script>
        <script src="<c:url value="/assets/js/neon-api.js" />"></script>
        <script src="<c:url value="/assets/js/highcharts.js" />"></script>
        <script src="<c:url value="/assets/js/exporting.js" />"></script>
        <script src="<c:url value="/assets/js/daterangepicker/moment.min.js" />"></script>
        <script src="<c:url value="/assets/js/daterangepicker/daterangepicker.js" />"></script>
    	<script src="<c:url value="/assets/js/neon-custom.js" />"></script>
      <script type="text/javascript">
          $("#select-values").click(function () {
            var option_all = $(".select1 option:selected").map(function () {
                return $(this).text();
            }).get().join(' ... ');
            console.log(option_all);
            var heading= 'Selected Mapping: ';            
            $('#result').text(heading + option_all);
        });

          $("#select-values1").click(function () {
            var option_all = $(".select3 option:selected").map(function () {
                return $(this).text();
            }).get().join(' ... ');
            console.log(option_all);
            var heading= 'Selected Mapping: ';            
            $('#result1').text(heading + option_all);
        });
          function loadForms()
          {
            $("#loadUploadForms").load( "UploadForm" );
      		console.log("Forms loaded");

          	
          }
		 /*------------------------------------------------------------------------------------------
		 *------------------------------------KNOCKOUT CODE STARTS----------------------------------
		 *--------------------------------------------------------------------------------------------
		 */
	var model = model || {};
	

	var loginUser= ko.observable("");
	//---------------------------------User Model------------------------------------------
	model.userData = function(data){
		var self = this;
		
		self.userId = ko.observable(data.userId);
		
		self.password = ko.observable(data.password);
		self.groupId = ko.observable(data.groupId);
		self.firstName = ko.observable(data.firstName);
		self.lastName = ko.observable(data.lastName);
		self.email = ko.observable(data.email);
		self.isActive = ko.observable(data.isActive);
		
		
		return self;
	};
	model.userDataNew = function(data){
		var self = this;
		
		self.userId = ko.observable();
		
		self.password = ko.observable();
		self.groupId = ko.observable();
		self.firstName = ko.observable();
		self.lastName = ko.observable();
		self.email = ko.observable();
		self.isActive = ko.observable();
		
		return self;
	};
	//---------------------------------Client Model------------------------------------------
	model.clientData = function(data){
		var self = this;

		self.clientId = ko.observable(data.clientId);
		self.firstName = ko.observable(data.firstName);
		self.lastName = ko.observable(data.lastName);
		self.profession = ko.observable(data.profession);
		self.contactNum = ko.observable(data.contactNum);
		
		
		return self;
	};
	model.clientDataNew = function(){
		var self = this;
		
		self.clientId = ko.observable();
		self.firstName = ko.observable();
		self.lastName = ko.observable();
		self.profession = ko.observable();
		self.contactNum = ko.observable();
		
		
		return self;
	};
	//---------------------------------Manager Model------------------------------------------
	model.managerData = function(data){
		var self = this;
		
		self.managerId = ko.observable(data.managerId);
		self.firstName = ko.observable(data.firstName);
		self.lastName = ko.observable(data.lastName);
		self.profession = ko.observable(data.profession);
		self.contactNum = ko.observable(data.contactNum);
		
		
		return self;
	};
	model.managerDataNew = function(){
		var self = this;
		self.managerId = ko.observable();
		self.firstName = ko.observable();
		self.lastName = ko.observable();
		self.profession = ko.observable();
		self.contactNum = ko.observable();
		
		
		return self;
	};
	//--------------------User group model-----------------------
	model.userGroupDataNew = function(data){
		var self = this;
		
		self.userId = ko.observable();
	
		self.groupId = ko.observable();
		
		
		return self;
	};
	model.userGroupData = function(data){
		var self = this;
		
		self.userId = ko.observable(data.userId);
	
		self.groupId = ko.observable(data.groupId);
		
		
		return self;
	};
	
	//------------------------------------Group Model -------------------------------------
	model.groupData = function(data){
		var self = this;
		
		self.groupId = ko.observable(data.groupId);
		self.groupName = ko.observable(data.groupName);
		self.parentGroupId = ko.observable(data.parentGroupId);
		
		return self;
	};
	model.groupDataNew = function(data){
		var self = this;
		
		self.groupId = ko.observable();
		self.groupName = ko.observable();
		self.parentGroupId = ko.observable();
				
		return self;
	};

	//------------------------------------Resource Model -------------------------------------
	
	model.resourceData = function(data){
		var self = this;
		
		self.resourceId = ko.observable(data.resourceId);
		self.resourceType = ko.observable(data.resourceType);
		self.groupId = ko.observable(data.groupId);
		self.fileName = ko.observable(data.fileName);
		
		return self;
	};

	model.resourceDataNew = function(data){
		var self = this;
		
		self.resourceId = ko.observable();
		self.resourceType = ko.observable();
		self.groupId = ko.observable();
		self.fileName = ko.observable();
		
		return self;
	};
	

	//------------------------------------Report Model -------------------------------------
	
	model.reportData = function(data){
		var self = this;
		
		self.category = ko.observable(data.category);
		self.groupId = ko.observable(data.groupId);
		self.fileName = ko.observable(data.fileName);
		
		return self;
	};

	model.reportDataNew = function(){
		var self = this;
		
		self.category = ko.observable();
		self.groupId = ko.observable();
		self.fileName = ko.observable();
		
		return self;
	};
	
	
	//-------------------------------------Functions Definitions---------------------------
	model.referenceDataFunctions = function(){
		
		pageList = ko.observableArray();

		resourceList = ko.observableArray();
		resourceAddEditData = ko.observable(new model.userDataNew());
		resourceActionMode = ko.observable();
		
		reportList = ko.observableArray();
		reportAddEditData = ko.observable(new model.reportDataNew());
		reportActionMode = ko.observable();

		userList = ko.observableArray();
		userAddEditData = ko.observable(new model.userDataNew());
		userActionMode = ko.observable();

		clientList = ko.observableArray();
		clientAddEditData = ko.observable(new model.clientDataNew());
		clientActionMode = ko.observable();

		managerList = ko.observableArray();
		managerAddEditData = ko.observable(new model.managerDataNew());
		managerActionMode = ko.observable();

		allUserGroupList = ko.observableArray();
		userGroupList = ko.observableArray();
		userGroupAddEditData = ko.observable(new model.userGroupDataNew());
		userGroupActionMode = ko.observable();
		unmappedGroupList = ko.observableArray();
		
		groupList = ko.observableArray();
		groupAddEditData = ko.observable(new model.groupDataNew());
		groupActionMode = ko.observable();
		
		onLoad = function(){

			loginUser('${userId}');
			console.log(ko.toJS(loginUser));
			
			userList([]);
			groupList([]);
			console.log("-------------------------Getting Lists-------------------------");
			
			//-----ajax request to fetch Page list--------------------
        				
			$.ajax({
				url: ezopsContextPath+ '/userResources/${userId}/Page',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
					 var mappedData = $.map(data ,function(row){
						  
						  return new model.resourceData(row);
					  }); 
					  
					  pageList(mappedData);
					  
					},
				error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});

			//-----ajax request to fetch Client list--------------------
        	
			$.ajax({
				url: ezopsContextPath+ '/getAllClients',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.clientData(row);
				  }); 
				  
				 clientList(mappedData);
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});
			



			//-----ajax request to fetch Manager list--------------------
        	
			$.ajax({
				url: ezopsContextPath+ '/getAllManagers',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.managerData(row);
				  }); 
				  
				  managerList(mappedData);
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});
			



			//-----ajax request to fetch user list--------------------
        	
			$.ajax({
				url: ezopsContextPath+ '/getAllUsers',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.userData(row);
				  }); 
				  
				  userList(mappedData);
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});
			


        	//-----ajax request to fetch User-GROUP list--------------------
        	$.ajax({
				url: ezopsContextPath+ '/getAllUserGroups',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.userGroupData(row);
				  }); 
				  
				  allUserGroupList(mappedData);
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});


        	//-----ajax request to fetch GROUP list--------------------
        	$.ajax({
				url: ezopsContextPath+ '/getAllGroups',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.groupData(row);
				  }); 
				  
				  groupList(mappedData);
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});


        	//-----ajax request to fetch RESOURCE list--------------------
        	$.ajax({
				url: ezopsContextPath+ '/getAllResources',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.resourceData(row);
				  }); 
				  
				  resourceList(mappedData);
				  console.log(ko.toJSON(resourceList));
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});

		

        	//-----ajax request to fetch REPORT list--------------------
        	$.ajax({
				url: ezopsContextPath+ '/getAllReports',
				type: 'GET',
		        dataType: 'json',
				success : function(data){
				  
				  
				  var mappedData = $.map(data ,function(row){
					  
					  return new model.reportData(row);
				  }); 
				  
				  reportList(mappedData);
				  console.log(ko.toJSON(reportList));
				  
				 },
				 error: function(data){

					 console.log("Error Response Text : "+data);
						
					}
								
			});

		
		
		},

		//-----------------------USER functions-----------------------------
				
				editUser = function(data)
				{
					userAddEditData(data);
					userActionMode('edit');
					console.log("Editing >---->> "+ko.toJSON(userAddEditData));
					
				},
				
				addUser = function()
				{
					userActionMode('add');
					userAddEditData(new model.userDataNew());
					
				},
				
				saveUser= function()
				{
					
					if(ko.toJS(userActionMode)=='add')
						{
							console.log("Saving >---->> "+ko.toJSON(userAddEditData));
							console.log("<-------------------Creating User------------------>");
						

							
							$.ajax({
								url:  ezopsContextPath+ '/createUser',
								data: ko.toJSON(userAddEditData),
								type: 'POST',
								dataType: 'text',
								contentType: 'application/json',
						        mimeType: 'application/json',
								success : function(data){
								  
								 console.log("User Saved "+ data);
								 userActionMode();
								 onLoad();
									},
								fail: function(data){
								  
									 console.log("error "+ data);
									
									 onLoad();
										
								  
									}
												
							});
							
							
						}else if(ko.toJS(userActionMode)=='edit')
							{
								console.log("Edited >---->> "+ko.toJSON(userAddEditData));
								console.log("<-------------------Updating User------------------>");
								

								$.ajax({
									url:  ezopsContextPath+ '/updateUser',
									data: ko.toJSON(userAddEditData),
									type: 'PUT',
									dataType: 'text',
									contentType: 'application/json',
							        mimeType: 'application/json',
									success : function(data){
									  
									 console.log("User Updated "+ data);
									 userActionMode();
									 onLoad();
										
										},
									fail: function(data){
									  
										 console.log("error "+ data);
											
										 onLoad();
											
										}
													
								});
								
								
							
							
							}
					
		 
				
				},



				//-----------------------CLIENT functions-----------------------------
						
						editClient = function(data)
						{
							clientAddEditData(data);
							clientActionMode('edit');
							console.log("Editing >---->> "+ko.toJSON(clientAddEditData));
							
						},
						
						addClient = function()
						{
							clientActionMode('add');
							clientAddEditData(new model.clientDataNew());
							
						},
						
						saveClient= function()
						{
							
							if(ko.toJS(clientActionMode)=='add')
								{
									console.log("Saving >---->> "+ko.toJSON(clientAddEditData));
									console.log("<-------------------Creating client------------------>");
								

									
									$.ajax({
										url:  ezopsContextPath+ '/createClient',
										data: ko.toJSON(clientAddEditData),
										type: 'POST',
										dataType: 'text',
										contentType: 'application/json',
								        mimeType: 'application/json',
										success : function(data){
										  
										 console.log("client Saved "+ data);
										 clientActionMode();
										 onLoad();
											},
										fail: function(data){
										  
											 console.log("error "+ data);
											
											 onLoad();
												
										  
											}
														
									});
									
									
								}else if(ko.toJS(clientActionMode)=='edit')
									{
										console.log("Edited >---->> "+ko.toJSON(clientAddEditData));
										console.log("<-------------------Updating client------------------>");
										

										$.ajax({
											url:  ezopsContextPath+ '/updateClient',
											data: ko.toJSON(clientAddEditData),
											type: 'PUT',
											dataType: 'text',
											contentType: 'application/json',
									        mimeType: 'application/json',
											success : function(data){
											  
											 console.log("client Updated "+ data);
											 clientActionMode();
											 onLoad();
												
												},
											fail: function(data){
											  
												 console.log("error "+ data);
													
												 onLoad();
													
												}
															
										});
										
										
									
									
									}
							
				 
						
						},


						//-----------------------Manager functions-----------------------------
								
								editManager = function(data)
								{
									managerAddEditData(data);
									managerActionMode('edit');
									console.log("Editing >---->> "+ko.toJSON(managerAddEditData));
									
								},
								
								addManager = function()
								{
									managerActionMode('add');
									managerAddEditData(new model.managerDataNew());
									
								},
								
								saveManager= function()
								{
									
									if(ko.toJS(managerActionMode)=='add')
										{
											console.log("Saving >---->> "+ko.toJSON(managerAddEditData));
											console.log("<-------------------Creating manager------------------>");
										

											
											$.ajax({
												url:  ezopsContextPath+ '/createManager',
												data: ko.toJSON(managerAddEditData),
												type: 'POST',
												dataType: 'text',
												contentType: 'application/json',
										        mimeType: 'application/json',
												success : function(data){
												  
												 console.log("manager Saved "+ data);
												 managerActionMode();
												 onLoad();
													},
												fail: function(data){
												  
													 console.log("error "+ data);
													
													 onLoad();
														
												  
													}
																
											});
											
											
										}else if(ko.toJS(managerActionMode)=='edit')
											{
												console.log("Edited >---->> "+ko.toJSON(managerAddEditData));
												console.log("<-------------------Updating manager------------------>");
												

												$.ajax({
													url:  ezopsContextPath+ '/updateManager',
													data: ko.toJSON(managerAddEditData),
													type: 'PUT',
													dataType: 'text',
													contentType: 'application/json',
											        mimeType: 'application/json',
													success : function(data){
													  
													 console.log("manager Updated "+ data);
													 managerActionMode();
													 onLoad();
														
														},
													fail: function(data){
													  
														 console.log("error "+ data);
															
														 onLoad();
															
														}
																	
												});
												
												
											
											
											}
									
						 
								
								},


				//-----------------------USERGroup functions-----------------------------
		getUserGroup = function(){
			unmappedGroupList([]);
			var userId = ko.toJS(userGroupAddEditData().userId); 
			
			console.log(userId);
			if(userId != '0')
			{
			
			
				//unmappedGroupList(groupList);
				
				//-----ajax request to fetch GROUP list for a USER--------------------
	        	$.ajax({
					url: ezopsContextPath+ '/userGroups/'+userId,
					type: 'GET',
			        dataType: 'json',
					success : function(data){
					  
					  
					  var mappedData = $.map(data ,function(row){
						  
						  return new model.userGroupData(row);
					  }); 
					  
					  userGroupList(mappedData);
					  console.log(ko.toJSON(userGroupList));
					  
					 
					 setTimeout(function(){
						 
						 console.log( userGroupList().length);
						 console.log( groupList().length);
						 var flag=true;
					    for(var i =0 ; i< groupList().length;i++)
						  {
					    	/*
						  	unmappedGroupList.remove(function(data){
						  		console.log(ko.toJS(data.groupId)+' -- remove --'+ko.toJS(userGroupList()[i].groupId));
						  		return ko.toJS(data.groupId)==ko.toJS(userGroupList()[i].groupId);
						  		
						  	});
					    	*/
					    	flag=true;
					    	for(var j =0 ; j< userGroupList().length;j++)
					    		{
					    			if(ko.toJS(groupList()[i].groupId)==ko.toJS(userGroupList()[j].groupId))
					    				{
					    					//unmappedGroupList.push(groupList()[j]);
					    					flag=false;
					    				}
					    		
					    		}
					    	if(flag)
					    		unmappedGroupList.push(groupList()[i]);
					    	
						  }
						 console.log(ko.toJSON(unmappedGroupList));
						 
					 },500);
					 
					 
						
					  
				
					 },
					 error: function(data){
	
						 console.log("Error Response Text : "+data);
							
						}
									
				});
			}			
		},
		editUserGroup = function(data)
		{
			//userAddEditData(data);
			//groupAddEditData(data);
			//userActionMode('edit');
			//console.log("Editing >---->> "+ko.toJSON(userAddEditData));
			
		},
		
		addUserGroup = function()
		{
			//userActionMode('add');
			userGroupAddEditData(new model.userGroupDataNew());
			
		},
		
		saveUserGroup= function()
		{
				//addUserToGroup
			var groups = $("#ugGroupId").val();
			console.log("<-------------------Creating User Group------------------>");
			
			for(var i =0 ; i < groups.length;i++)
				{
				userGroupAddEditData().groupId(groups[i]);
				console.log("Saving >---->> "+ko.toJSON(userGroupAddEditData));
				
				$.ajax({
					url:  ezopsContextPath+ '/addUserToGroup',
					data: ko.toJSON(userGroupAddEditData),
					type: 'POST',
					dataType: 'text',
					contentType: 'application/json',
			        mimeType: 'application/json',
					success : function(data){
					  
					 console.log("User Group Saved "+ data);
					
					 onLoad();
						},
					fail: function(data){
					  
						 console.log("error "+ data);
							
					  
						}
									
					});				
				}

		},

	//-----------------------GROUP functions-----------------------------
		
		editGroup = function(data)
		{
			groupAddEditData(data);
			groupActionMode('edit');
			console.log("Editing >---->> "+ko.toJSON(groupAddEditData));
			
		},
		
		addGroup = function()
		{
			groupActionMode('add');
			groupAddEditData(new model.groupDataNew());
			
		},
		
		saveGroup= function()
		{
			
			if(ko.toJS(groupActionMode)=='add')
				{
					console.log("Saving >---->> "+ko.toJSON(groupAddEditData));
					console.log("<-------------------Creating Group------------------>");
				

					
					$.ajax({
						url:  ezopsContextPath+ '/createGroup',
						data: ko.toJSON(groupAddEditData),
						type: 'POST',
						dataType: 'text',
						contentType: 'application/json',
				        mimeType: 'application/json',
						success : function(data){
						  
						 console.log("Group Saved "+ data);
						 groupActionMode();
						 onLoad();
							},
						fail: function(data){
						  
							 console.log("error "+ data);
								
						  
							}
										
					});
					
					
				}else if(ko.toJS(groupActionMode)=='edit')
					{
						console.log("Edited >---->> "+ko.toJSON(groupAddEditData));
						console.log("<-------------------Updating Group------------------>");
						

						$.ajax({
							url:  ezopsContextPath+ '/updateGroup',
							data: ko.toJSON(groupAddEditData),
							type: 'PUT',
							dataType: 'text',
							contentType: 'application/json',
					        mimeType: 'application/json',
							success : function(data){
							  
							 console.log("Group Updated "+ data);
							 groupActionMode();
							 onLoad();
								},
							fail: function(data){
							  
								 console.log("error "+ data);
							  
								}
											
						});
						
					}
			
 		},
 		//-----------------------Report functions-----------------------------
		
		editReport = function(data)
		{
			reportAddEditData(data);
			reportActionMode('edit');
			console.log("Editing >---->> "+ko.toJSON(reportAddEditData));
			
		},
		
		addReport = function()
		{
			reportActionMode('add');
			reportAddEditData(new model.reportDataNew());
			
		},
		
		saveReport = function()
		{
			var filedata = new FormData();
			jQuery.each($('#file')[0].files, function(i, file) {
			    filedata.append('file-'+i, file);
			});
			
			
			if(ko.toJS(reportActionMode)=='add')
				{
					console.log("Saving >---->> "+ko.toJSON(reportAddEditData));
					console.log("<-------------------Creating Report------------------>");
					
					/*
					$.ajax({
					    url: baseUrl+ '/storeReport',
					    data: filedata,
					    cache: false,
					    contentType: false,
					    processData: false,
					    type: 'POST',
					    success: function(data){
					        alert(data);
					    }
					});
					*/
					
					$.ajax({
						url:  ezopsContextPath+ '/storeReport',
						data: ko.toJSON(resourceAddEditData),
						type: 'POST',
						dataType: 'text',
						contentType: 'application/json',
				        mimeType: 'application/json',
						success : function(data){
						  
						 console.log("Resource Saved "+ data);
						 resourceActionMode();
						 onLoad();
							},
						fail: function(data){
						  
							 console.log("error "+ data);
								
						  
							}
										
					});
					
				}else if(ko.toJS(resourceActionMode)=='edit')
					{
						console.log("Edited >---->> "+ko.toJSON(resourceAddEditData));
						console.log("<-------------------Updating Resource------------------>");
						

						$.ajax({
							url:  ezopsContextPath+ '/updateResource',
							data: ko.toJSON(resourceAddEditData),
							type: 'PUT',
							dataType: 'text',
							contentType: 'application/json',
					        mimeType: 'application/json',
							success : function(data){
							  
							 console.log("ResourceUpdated "+ data);
							 resourceActionMode();
							 onLoad();
								},
							fail: function(data){
							  
								 console.log("error "+ data);
							  
								}
											
						});
						
					}
			
 		},
 		//-----------------------Resource functions-----------------------------
		
		editResource = function(data)
		{
			resourceAddEditData(data);
			resourceActionMode('edit');
			console.log("Editing >---->> "+ko.toJSON(resourceAddEditData));
			
		},
		
		addResource = function()
		{
			resourceActionMode('add');
			resourceAddEditData(new model.resourceDataNew());
			
		},
		
		saveResource= function()
		{
			
			if(ko.toJS(resourceActionMode)=='add')
				{
					console.log("Saving >---->> "+ko.toJSON(resourceAddEditData));
					console.log("<-------------------Creating Resource------------------>");
				

					
					$.ajax({
						url:  ezopsContextPath+ '/createResource',
						data: ko.toJSON(resourceAddEditData),
						type: 'POST',
						dataType: 'text',
						contentType: 'application/json',
				        mimeType: 'application/json',
						success : function(data){
						  
						 console.log("Resource Saved "+ data);
						 resourceActionMode();
						 onLoad();
							},
						fail: function(data){
						  
							 console.log("error "+ data);
								
						  
							}
										
					});
					
					
				}else if(ko.toJS(resourceActionMode)=='edit')
					{
						console.log("Edited >---->> "+ko.toJSON(resourceAddEditData));
						console.log("<-------------------Updating Resource------------------>");
						

						$.ajax({
							url:  ezopsContextPath+ '/updateResource',
							data: ko.toJSON(resourceAddEditData),
							type: 'PUT',
							dataType: 'text',
							contentType: 'application/json',
					        mimeType: 'application/json',
							success : function(data){
							  
							 console.log("ResourceUpdated "+ data);
							 resourceActionMode();
							 onLoad();
								},
							fail: function(data){
							  
								 console.log("error "+ data);
							  
								}
											
						});
						
					}
			
 		}
	
		return{
			
			onLoad : onLoad,
			
			addUser : addUser,
			editUser : editUser,
			saveUser : saveUser,
			
			addClient : addClient,
			editClient : editClient,
			saveClient : saveClient,
			
			addManager : addManager ,
			editManager  : editManager ,
			saveManager  : saveManager ,
			
			addUserGroup : addUserGroup,
			getUserGroup : getUserGroup,
			editUserGroup : editUserGroup,
			saveUserGroup : saveUserGroup,
			
			addGroup : addGroup,
			editGroup : editGroup,
			saveGroup : saveGroup,
			
			addResource : addResource,
			editResource : editResource,
			saveResource : saveResource,
			
			addReport : addReport,
			editReport : editReport,
			saveReport : saveReport
			
			
		}	 
			 
			 
		 }(); 
		 
		 
	 
	ko.applyBindings(model.referenceDataFunctions);
	model.referenceDataFunctions.onLoad();
		 /*------------------------------------------------------------------------------------------
		 *-------------------------------------KNOCKOUT CODE ENDS------------------------------------
		 *--------------------------------------------------------------------------------------------
		 */
				 
		 
		 
		 
      </script>
      <style>
    a.disabled{
    
    	color:gray;
    	cursor: default;
    }
    </style>
</body>
</html>